<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="con-global-ossimage">
    <slot />
    <w-search-bar
      v-show="searchBar"
      ref="WSearchBar"
      class="search-bar"
      @searchClick="searchClick"
    />
    <ul class="data-arr clearfix w-pointer">
      <li
        v-for="(v, k) in dataArr"
        :key="v.name"
        v-lazy:background-image="v.small"
        class="cell w-image-fit w-hover-glow"
        @click="itemClick(v, k)"
      >
        <a-icon type="delete" class="clear-icon w-pointer" @click.stop="removeClick(v, k)" />
      </li>
    </ul>
    <w-load-more ref="WLoadMore" @loadMore="loadData" />
    <w-viewer ref="WViewer" />
    <w-modal
      ref="WModal"
      title="删除提示"
      @hide="currentItem = null"
      @ok="removeOkBtnClick"
    >
      <img
        v-if="currentItem"
        :src="currentItem.removePopUrl"
        style="max-width: 400px;max-height: 400px"
        alt=""
      />
    </w-modal>
  </div>
</template>

<script>
import WSearchBar from '@/components/global/searchBar/day-month'
import { Admin } from '@/config/api'
import { imageLfit } from '@/utils/filters/oss'
import WViewer from '@/components/global/viewer'
import WLoadMore from '@/components/global/loadMore'
import WModal from '@/components/global/modal'
export default {
  name: 'ComGlobalImage',
  components: {
    WSearchBar,
    WViewer,
    WLoadMore,
    WModal
  },
  props: {
    bucket: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: ''
    },
    /**
     * 显示的图片字段
     */
    urlP: {
      type: String,
      default: ''
    },
    /**
     * 是否显示搜索框
     */
    searchBar: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      dataArr: [],
      dateStr: null,
      currentItem: null,
      currentIndex: -1
    }
  },
  watch: {
    prefix () {
      this.clearData()
    }
  },
  methods: {
    searchClick (obj) {
      this.dateStr = obj.dateStr
      this.clearData()
    },
    /**
     * 加载数据
     */
    loadData () {
      const lastKey = this.dataArr.length
        ? this.dataArr[this.dataArr.length - 1].name
        : undefined
      this.$wAxios
        .$get(Admin.ali.ossList, {
          lastKey,
          pageSize: 30,
          prefix: `${this.prefix}${this.dateStr || ''}`
        })
        .then((data) => {
          data.forEach((item) => {
            item.small = imageLfit(item.cdnUrl, 160, 160)
          })
          if (data.length < 30) {
            this.$refs.WLoadMore.complete()
          } else {
            this.$refs.WLoadMore.loaded()
          }
          this.dataArr = this.dataArr.concat(data)
        })
        .catch(() => {
          this.$refs.WLoadMore.complete()
        })
    },
    /**
     * 清除数据
     */
    clearData () {
      this.dataArr = []
      this.$refs.WLoadMore.reset()
    },
    itemClick (item) {
      this.$refs.WViewer.show([item.cdnUrl])
    },
    removeClick (item, index) {
      this.currentItem = item
      this.currentIndex = index
      item.removePopUrl = imageLfit(item.cdnUrl, 400, 400)
      this.$refs.WModal.show()
    },
    removeOkBtnClick () {
      this.$wRemovePop(() => {
        return this.$wAxios.$delete(Admin.ali.ossDelete, '', {
          name: this.currentItem.name,
          bucket: this.bucket
        })
      }, this.currentItem.name)
        .then(() => {
          this.dataArr.splice(this.currentIndex, 1)
          this.$refs.WModal.close()
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.con-global-ossimage {
  position: relative;
  .search-bar {
    position: absolute;
    right: 0;
    top: 0;
  }
  .data-arr {
    .cell {
      width: 160px;
      height: 160px;
      float: left;
      border: 1px dashed #ccc;
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;
      > .clear-icon {
        position: absolute;
        right: 5px;
        font-size: 20px;
        top: 5px;
        color: #ccc;
        padding: 2px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.1);
      }
      > .clear-icon:hover {
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>
